<template>
	<view class="main">
		<view class="title">
			<view class="login-close"  @click="goBack">
				<uni-icons type="back" size="30"></uni-icons>
			</view>	
		</view>
		<view class="title-text">
			<p class="title-text_p">请到邮箱收取验证码</p>
		</view>
		<u-message-input  @change="change" width="116" height="112"  :bgColor="rgba" :inactiveColor="inactiveColor" @finish="finish" class="message-input" mode="box" ></u-message-input>
		<view class="wrap">
			<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"  :start-text="startText" :end-text="endText" :change-text="changeText"
			@change="codeChange"></u-verification-code>
			<u-button @tap="getCode">{{tips}}</u-button>
		</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		computed,
		onMounted,
		getCurrentInstance,
	} from "vue";
	import {
		useI18n
	} from "vue-i18n";
	import {onLoad} from "@dcloudio/uni-app";
	import { useRouter } from 'vue-router';
	export default defineComponent({
		props:{},
		setup(props){
			let uCode = ref(null)
			let uToast = ref(null)
			const {
				t
			} = useI18n();
			const that = getCurrentInstance();
			const pages = getCurrentPages();
			const router = useRouter();
			const data = reactive({
				rgba : 'rgba(0,0,0,0.03)',
				inactiveColor :'',
				code :'',
				email:"",
				seconds: 60,
				tips:"",
				startText: t('mine.get_verify_code'),
				endText:t('mine.regain_verify_code'),
				changeText: "x" + " " + t('mine.second'),
			});
			// console.log(props.email)
			onLoad((option)=>{
				data.email = option.email
			}),
			onMounted(()=>{
				// console.log(uToast.value)
			});
			const codeChange =(text)=> {
				data.tips = text;
			};
			const change = (e) =>{
				if(data.inactiveColor != ''){
					data.rgba = 'rgba(0,0,0,0.03)'
					data.inactiveColor =''
				}
			};
			const goBack =() => {
				if (pages.length > 1) {
					uni.$u.route({
					    type:'back',
					    delta:1
					})
				} else {
					router.push({ path: '/pages/login/index' })
				}
			};
			const finish = (e)=>{
				uni.navigateTo({
				    url:'/pages/forget_password/password?email'+data.email
				})
				// that.proxy.$http.post('/client/user/account/email/verify',{email: data.email,code:e}).then(res => {
				//    if (res == "success"){
				//        uni.navigateTo({
				//        	url:'/pages/forget_password/password?email'+data.email
				//        })
				//    }else{
				// 	  data.rgba = 'rgba(244, 67, 54, 0.1)',
				// 	  data.inactiveColor = 'rgba(244, 67, 54, 1)',
				// 	   uni.showToast({
				// 			title:t('mine.verify_failed'),
				// 			icon: 'none'
				// 	   })
				//    }
				// });
			};
			const end =()=> {
				// this.$u.toast('倒计时结束');
			};
			const start =() => {
			 	// this.$u.toast('倒计时开始');
			};
			const getCode = () =>{
				if (uCode.value.canGetCode) {
				    that.proxy.$http.get('/client/user/account/email/code', {email: data.email}).then(res => {
						if(res == "success"){
							setTimeout(() => {
								uni.showToast({
									title:t('mine.send_success'),
									icon: 'none'
								})
							    // 通知验证码组件内部开始倒计时
							    uCode.value.start();
							}, 1000);
						}else{
							uni.showToast({
								title:"邮箱发送失败",
								icon:'none'
							})
						}
				    });
				} else {
					uni.showToast({
						title:t('mine.regain_afte'),
						icon: 'none'
					})
				}
			};
			return {
				...toRefs(data),
				change,
				finish,
				codeChange,
				end,
				start,
				getCode,
				uCode,
				goBack,
				router
			}
		}

	})
</script>

<style lang="scss">
	.main{
		background-color: #FEFEFE;
		height: 1624rpx;
		width: 100%;
		border-top: 1rpx solid #fff;
	}
	.title{
		display: flex;
		text-align: center;
		vertical-align: middle;
		width: 100%;
		margin-top: 88rpx;
		height: 88rpx;
		.login-close {
			width: 48rpx;
			height: 48rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			// margin-top: 110rpx;
			margin-left: 48rpx;
			.icon {
				font-size: 42rpx;
				color: #000000;
			}
		}
	}
	.title-text{
		width: 100%;
		height: 90rpx;
		line-height: 120rpx;
		margin-top: 120rpx;
		p{	
			margin: 0 auto;
			width: 576rpx;
			height: 90rpx;
			font-size: 64rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 75rpx;
			-webkit-background-clip: text;

		}
	}
	// .message-input{
	// 	background: #000000;
	// 	opacity: 0.03;
		
	// }
	
</style>
